<template>
    <div>
        <div class="box">
            <h3>过滤器</h3>
            <div>
                <input type="text" v-model="inputContent">
                <span>{{inputContent | capitalize1 | capitalize}}</span>
            </div>
        </div>
        <div class="box">
            <h3>插槽和prop传值</h3>
            <div>
                <childVue :childContent="childContent" @passValue="getChidData">
                   <span style="color:#f00;">这是放的是子组件使用的是slot</span>
                </childVue>
            </div>
            <div>
                <li v-for="(item,k) in childPassData" :key="k">
                    <span>{{item.id}}</span>
                    <span>{{item.name}}</span>
                    
                </li>
            </div>
        </div>
    </div>
</template>
<script>
import childVue from "./childVue";
export default {
  components: {
    childVue
  },
  data() {
    return {
      inputContent: null,
      childContent:"通过prop传值过去,我传值过去他自己的值就不见了,老虎不在猴子称霸",
      childPassData:null,
    };
  },
  filters: {
    capitalize(value) {
      //局部过滤器
      console.log(value, 88);
      if (!value) {
        return "";
      } else {
        console.log(value.toString());
        value = value.toString();
        // return value.charAt(0).toUpperCase() + value.slice(1)
        return value + 10;
      }
    }
  },
//   created(){
//       this.getChidData();
//   },
  methods:{
      getChidData(val){
          console.log(val);
          this.childPassData = val;
      }
  }
};
</script>
<style scoped>
.box{
    margin: 20px auto;
    width: 500px;
    height: 200px;
    border: 1px solid #ddd;
}
</style>